<template>
  <ul class="tab">
    <router-link class="item" tag="li" to="/recommend">推荐</router-link>
    <router-link class="item" tag="li" to="/singer">歌手</router-link>
    <router-link class="item" tag="li" to="rank">排行</router-link>
    <router-link class="item" tag="li" to="search">搜索</router-link>
  </ul>
</template>

<script>
    export default {
        name: "Tab"
    }
</script>

<style scoped lang="stylus">
 @import "~common/stylus/variable"

 .tab
  display flex
  justify-content space-evenly
  .item
    padding-bottom 5px
    color $color-text
    font-size $font-size-medium
    &.router-link-active
      color $color-theme
      border-bottom 2px solid $color-theme
</style>
